<template>
	<div id="">
		<el-button type="primary" plain @click="ToCorrect(1)">发布文章</el-button>
		<el-button type="primary" plain @click="ToCorrect(2)">存为草稿</el-button>
		<el-input
		  placeholder="标题"
		  v-model="title"
		  clearable
		  class="title"
		  >
		</el-input>
		<quill-editor
				class="ql-editor"
				style="height: 250px;"
				v-model="content"
				ref="editorRef"
				:options="editorOption"
				@focus="onEditorFocus($event)"
				@blur="onEditorBlur($event)"
				@change="onEditorChange($event)"
			  />
	</div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import "assets/css/quillEditor.css";
import * as Quill from "quill";
import {toPublish, toDraft, toCorrect}from 'network/articlemag.js' 
import { getDetail }	from 'network/detail.js'
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ['link', 'image', 'video'], // 链接、图片、视频-----
];

export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
		Id:1,
	  title: '',
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  methods: {
	  ToPublish(choice){
		  console.log(123)
		  toPublish(this.content,this.title,this.common.token,choice).then(res=>{
			// console.log(res)
			if(res.status!==0)
				return alert('文章内容不允许为空!')
		  })
	  },
	  Edit(convey_content){
		  this.content = convey_content
	  },
	  ToCorrect(choice){
		  toCorrect(this.content,this.title,this.common.token,choice,this.Id).then(res=>{
			  if(res,status==0)
				 alert('发布成功!')
			this.$router.back()
		  })
	  },
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件,
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
    },
  },
  created(){
	  console.log(this.$route.query.Id)
  	getDetail(this.$route.query.Id).then(res=>{
		this.Id = this.$route.query.Id
  		this.content = res.data[0].content
		this.title = res.data[0].title
  	})
  }
};
</script>
<style scoped="scoped">
	.title{
		border: none;
	}
</style>
